<template>
    <div class="com-cnt">
        <div class="top">
            <button class="btn_1 active">个人信息</button>
            <button class="btn_2 te">会员认证</button>
            <button class="btn_3">地址管理</button>
        </div>
        <div ref="iframeCnt" class="ifram" style="height: 100%;">
            <ul class="ifram_ul">
                <li>
                    <span class="li_l">手机号码</span>
                    <span class="li_r mobile"></span>
                </li>
                <li class="xiugai">
                    <span class="li_l">修改头像</span>
                    <span class="li_r">&gt;</span>
                </li>
            </ul>

            <div class="change_tx" style="position:relative;display:none;">
                <form @submit.prevent="submit($event)" action="" id="inputForm" type="button">
                    <div class="up">
                        <img :src="memImg" alt="" class="big_photo" id="pic">
                        <p class="chan_name">修改头像</p>
                        <input type="file" id="upload" accept="image/*" name="file" style="position: absolute; top: 82%; left: 0%; width: 100%; height:18% ;opacity: 0; margin:0;display:block;">
                    </div>
                </form>
                <button class="go_tx" @click="savePhoto()">确定</button>
            </div>

        </div>
        <div class="smz" style="display:none;">
            <ul>
                <li class="inputli">
                    <span><img src="@/assets/imgs/my/userhead.png" alt="姓名"></span><input type="text" placeholder="真实姓名" v-model="sfzxm">
                </li>
                <li class="inputli">
                    <span><img src="@/assets/imgs/my/userid.png" alt="身份证号"></span><input type="text" placeholder="身份证号" v-model="sfzkh" onkeyup="this.value= this.value.match(/^[0-9]*$/) ? this.value.match(/^[0-9]*$/)[0] : ''">
                </li>
                <!-- <li class="inputli">
                    <input type="text" placeholder="银行卡号" v-model="yhkh" onkeyup="this.value= this.value.match(/^[0-9]*$/) ? this.value.match(/^[0-9]*$/)[0] : ''">
                </li>
                <li class="inputli">
                    <input type="text" placeholder="银行卡绑定手机号" v-model="yhkbdsjh" onkeyup="this.value= this.value.match(/^[0-9]*$/) ? this.value.match(/^[0-9]*$/)[0] : ''">
                </li> -->
                <li class="inputli">
                    <button @click="smrz">确定</button>
                </li>
            </ul>
            <p class="tips">点击确定视为已阅读并同意
                <router-link :to="{path:'smregular'}" tag="span" style="color:blue">《蓄康荟会员规则》</router-link>
            </p>
        </div>
        <div class="dzgl" style="display:none;">
            <div class="box">
                <!-- 地址 -->
                <ul class='oist' v-if="addressInfo.length>0">
                    <li>
                        <div class="boom">
                            <div class="boom_t">
                                <p> 
                                    <span>{{addressInfo[0].consignee}}</span>
                                    <span>{{addressInfo[0].phone}}</span>
                                    <span class="te active">默认</span>
                                </p>
                                <p>
                                    {{addressInfo[0].areaName}} {{addressInfo[0].address}}
                                </p>
                            </div> 
                            <div class="boom_b">
                                <div class="set">
                                    <input type="radio" id="radio1" name="radio" checked="checked" />
                                    <label for="radio1"></label>
                                    <span class="mr" style="color:#F8A120">默认地址</span>
                                </div>

                                <div class="right">
                                    <!-- <div class="edit">
                                        <span class="corn" @click="direct()">编辑</span>
                                    </div> -->
                                    <div class="del">
                                        <span class="corn delete" @click="del(addressInfo[0].id)">删除</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 添加收货人按钮 -->
                <button class="btn" @click="direct()" v-else>添加新收货人</button>
            </div>
        </div>
    </div>
</template>
<script>
import Qs from 'qs'
import axios from 'axios'
import http from "@/assets/js/axios"
import { domain,domain2 } from '@/assets/js/config'
import { maskTips, maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
export default {
    name: 'userinfoPage',
    components: {
    },
    data() {
        return {
            list: [],
            yhkh: '',
            sfzxm: '',
            sfzkh: '',
            yhkbdsjh: '',
            memImg: require('../../assets/imgs/registerhead.png'),
            userToken: '',
            addressInfo: [],
            mobile: localStorage.getItem('phone'),
        }
    },
    mounted() {
        this.getAddress();
        var that = this
        maskCallback(function () {
            that.$router.push('/newrecharge')
        }, 'comp-mask-btnAleft-govip', 'comp-mask-btnAright')
        $('.top button').click(function () {
            var self = $(this)
            self.addClass('active').siblings().removeClass('active');
            var _this = $(this).text();
            if (_this == '个人信息') {
                $('.ifram').show();
                $('.smz').hide();
                $('.dzgl').hide();
            } else if (_this == '会员认证') {
                $('.ifram').hide();
                $('.smz').show();
                $('.dzgl').hide();
                var uthenticationStatus = localStorage.getItem('uthenticationStatus')
                if (uthenticationStatus == 2) {
                    $('.smz').show();
                    $('.ifram').hide();
                    $('.dzgl').hide();
                } else if (uthenticationStatus == 3) {
                    $('.smz').show();
                    $('.smz').html('');
                    maskTips({ id: "already-uthenticationStatus", txt: "您已实名认证" })
                    setTimeout(function () {
                        window.location.reload()
                    }, 2000);
                }
            } else if (_this == '地址管理') {
                $('.ifram').hide();
                $('.smz').hide();
                $('.dzgl').show();
            }
        });

        var userToken = localStorage.getItem("token") || '' //用户token值
        // console.log(userToken)
        // 获取手机号 图片等基本信息
        $.ajax({
            url: domain + "/xshk/f/home/info?token=" + userToken,
            type: "post",
            dataType: "json",
            xhrFields: { withCredentials: true },
            crossDomain: true,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (data) {
                console.log(data)
                if (data) {
                    if (data.code == -5) {
                        maskTips({ id: 'login-timeout', txt: data.message })
                        that.$router.push('/login')
                    } else if (data.code === 0) {
                        var mobile = data.data.mobile;
                        that.memImg = data.data.photo;
                        function getObjectURL(file) {
                            var url = null;
                            if (window.createObjectURL != undefined) { // basic
                                url = window.createObjectURL(file);
                            } else if (window.URL != undefined) { // mozilla(firefox)
                                url = window.URL.createObjectURL(file);
                            } else if (window.webkitURL != undefined) { // webkit or chrome
                                url = window.webkitURL.createObjectURL(file);
                            }
                            return url;
                        }

                        // 点击修改头像p
                        function upimg() {
                            var r = new FileReader();
                            var f = $('#upload')[0].files[0];
                            r.readAsDataURL(f);
                            r.onload = function (e) {
                                $('.big_photo').src = this.result;
                            };
                        };
                        $("#upload").click(); //隐藏了input:file样式后，点击按钮就可以本地上传
                        $("#upload").on("change", function () {
                            var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                            if (objUrl) {
                                $(".big_photo").attr("src", objUrl); //将图片路径存入src中，显示出图片
                                upimg();
                            };
                        });
                        $('.mobile').text(mobile)
                    } else {
                        maskTips({ id: 'loginxhr-fail', txt: data.message })
                    }
                } else {
                    console.log("数据为空");
                }
            },
            error: function () {
                console.log("登录失败");
            }
        })
        // 点击修改头像li切换
        $('.xiugai').click(function () {
            $('.ifram_ul').hide();
            $('.change_tx').show()
        });
    },
    methods: {
        direct: function (val) {
            this.$router.push({                path: "/detail",
                query: {
                    id: val
                }
            });
        },
        savePhoto: function () {
            var that = this
            if ($("#file").val() == '') {
                maskTips({ id: "inptForm_1", txt: '请选择头像' })
                $("#file").focus();
                return false;
            };
            var userToken = localStorage.getItem("token") || '' //用户token值
            var file = new FormData($('#inputForm')[0]);//form提交文件格式
            console.log(file)
            $.ajax({
                type: "post",
                url: domain + "/xshk/f/home/savePhoto?token=" + userToken,
                dataType: 'json',
                contentType: false,
                processData: false,
                mimeType: "multipart/form-data",
                data: file,
                success: function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        that.$router.push('/center')
                    } else {
                        maskTips({ id: "inptForm_1", txt: '头像选择失败' })
                    }
                }
            });
        },
        del: function (id) {
            let that = this;
            let userToken = localStorage.getItem("token") || '';
            var data_id = $('.delete').attr('data-id');
            axios({
                url: domain2 + '/shop/api/member/receiver/delete',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'id':id})
            }).then(res => { that.delsucc(res) }).catch(err => { console.log(err) })
        },
        delsucc: function (res) {
            if (res.status == 200) {
                console.log(res)
                window.location.reload();
            }
        },
        getAddress: function (){
            let that = this
            axios({
                            url: domain2 + '/shop/api/member/receiver/list',
                            method: 'post',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            data: Qs.stringify({
                                'mobile':that.mobile
                            })
                        }).then(res => { that.getAddressSucc(res) }).catch(err => { console.log(err) })
        },
        getAddressSucc: function(res){
            this.addressInfo = res.data.data.content
        },
        // newItem(item) {
        //     return `${item.substring(0, 3)}****${item.substring(item.length - 4)}`;
        // },
        
        smrz: function () {
            var userToken = localStorage.getItem("token") || '';
            var that = this
            // var card = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/
            var card = /\d{15}|\d{19}/

            if(!card.test(this.yhkh)&&this.yhkh != ''){
                maskTips({id:"card-error",txt:"请输入正确银行卡"})
                return false
            }

            var ChineseName = /^([\u4e00-\u9fa5]){2,7}$/
            if(!ChineseName.test(this.sfzxm)){
                maskTips({id:"name-error",txt:"请输入正确的姓名"})
                return false
            }
                
            var idCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
            if(!idCard.test(this.sfzkh)){
                maskTips({id:"id-error",txt:"请输入正确身份证卡号"})
                return false
            }

            var phoneNo = /^[1][3,4,5,7,8][0-9]{9}$/
            if(!phoneNo.test(this.yhkbdsjh)&&this.yhkbdsjh != ''){
                maskTips({id:"phoneNo-error",txt:"请输入正确手机号"})
                return false
            }

            $.ajax({
                type: "POST",
                url: domain + "/xshk/f/bank_validate2?token=" + userToken,
                data: { mobile: this.yhkbdsjh, bankId: this.yhkh, userName: this.sfzxm, idCard: this.sfzkh },
                dataType: "JSON",
                success: function (data) {
                    console.log(this)
                    var code = data.code;
                    var message = data.message;
                    console.log(data)
                    if (code == -3) {
                        console.log(message);//
                        //window.open("${ctxF}/toBankValidate","_parent");
                        maskTips({ id: "certification-fail-2"+ new Date().getTime(), txt: message })
                    } else if (code !== 0) {
                        console.log(message);
                        maskTips({ id: "certification-fail-3"+ new Date().getTime(), txt: message })
                    } else if (code === 0) {
                       //maskTips({id:"certification-success",txt:"实名认证成功"})
                        localStorage.setItem('uthenticationStatus',3)
                        maskTips({ id: "certification-success"+ new Date().getTime(),title:'温馨提示',btnCls:'comp-mask-btnAleft-govip',btnTxt:'去办理会员',btnTxt2:'取消', txt: "会员认证成功" })
                        // that.$router.push('/center')
                    } else {
                        console.log(message)
                    }
                }
            })
        },
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl';

.com-cnt {
    width: 100%;
    height: auto;

    .ifram {
        width: 100%;
        height: auto;

        ul {
            width: 100%;
            height: 100%;
            padding: 0 15px;
            box-box-sizing: border-box;

            li {
                width: 100%;
                height: 48px;
                border-bottom: 1px solid #F0F0F0;
                font-size: 14px;
                font-family: 'PingFangSC-Regular';
                color: #999;

                .li_l {
                    float: left;
                    line-height: 48px;
                }

                .li_r {
                    float: right;
                    line-height: 48px;
                }
            }
        }

        .change_tx {
            width: 100%;
            height: auto;

            .up {
                width: 100%;
                height: 334px;
                padding: 38px 0;
                box-sizing: border-box;

                .big_photo {
                    width: 220px;
                    height: 220px;
                    margin: 0 auto;
                    display: block;
                    border-radius: 50%;
                }

                .chan_name {
                    text-align: center;
                    font-size: 16px;
                    line-height: 56px;
                    color: #c3c3c3;
                    font-family: 'PingFang-SC-Regular';
                }
            }

            .go_tx {
                width: 100%;
                height: 50px;
                outline: none;
                border: none;
                color: #fff;
                background: #aad114;
                float: left;
            }
        }
    }

    .box {
        width: 100%;
        height: 100%;
        background: #f9f9f9;
        position: relative;
        font-family: 'PingFang-SC-Medium';

        .ul {
            width: 100%;
            height: auto;

            li {
                width: 100%;
                background: #fff;
                margin-bottom: 0.2rem;

                .boom {
                    width: 100%;
                    height: 2.46rem;

                    .boom_t {
                        height: 1.66rem;
                        border-bottom: 1px solid #f2f2f2;
                        padding: 0.26rem 0.4rem;
                        box-sizing: border-box;

                        p {
                            font-size: 14px;
                            line-height: 0.56rem;
                            color: #999;
                            font-family: 'PingFang-SC-Regular';

                            span {
                                color: #666;
                                font-size: 20px;
                                line-height: 0.56rem;
                                margin-right: 0.1rem;
                            }

                            .te {
                                display: inline-block;
                                width: 0.8rem;
                                height: 0.36rem;
                                line-height: 0.36rem;
                                color: #f19736;
                                border: 1px solid #f19736;
                                border-radius: 5px;
                                text-align: center;
                                display: none;
                            }

                            .active {
                                display: inline-block;
                            }
                        }
                    }

                    .boom_b {
                        height: 0.79rem;
                        border-bottom: 1px solid #f2f2f2;
                        padding: 0 0.4rem;
                        box-sizing: border-box;

                        span {
                            color: #999;
                            font-size: 0.24rem;
                            line-height: 0.79rem;
                            display: inline-block;
                            float: left;
                        }

                        .right {
                            float: right;
                            width: 2.24rem;
                            height: 100%;

                            .edit {
                                float: left;
                                font-family: 'PingFang-SC-Regular';
                                background: url('../../assets/imgs/bianji.png') no-repeat center left;
                            }

                            .del {
                                float: right;
                                font-family: 'PingFang-SC-Regular';
                                background: url('../../assets/imgs/shanchu.png') no-repeat center left;
                            }

                            .corn {
                                margin-left: 0.5rem;
                            }
                        }
                    }
                }
            }
        }

        .set {
            float: left;
            width: 65%;
            height: 100%;
        }

        input {
            display: none;
            width: 0.36rem;
            height: 0.36rem;
            float: left;
        }

        label {
            width: 10%;
            height: 100%;
            display: inline-block;
            position: relative;
            line-height: 50px;
            color: #999;
            float: left;
        }

        label:active {
            background: #EEEEEE;
        }

        label:after {
            content: '';
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            border: 1px solid #F8A120;
            position: absolute;
            top: 0.22rem;
            margin-right: 10px;
            border-radius: 20px;
        }

        input:checked+label:after {
            background-color: #F8A120;
        }

        .line {
            width: 100%;
            height: 1px;
            background: #ccc;
            opacity: 0.2;
        }

        /* 添加收货人按钮 */
        .btn {
            width: 100%;
            height: 1rem;
            position: fixed;
            bottom: 1rem;
            background: #f8a120;
            border: none;
            outline: none;
            font-size: 16px;
            color: #fff;
            font-family: 'PingFang-SC-Medium';
        }
    }
}
.tips{
    font-size 12px
    padding-left 20px
    color #999
    margin-top 40px}
.inputli {
    width 88.5%
    margin 0 auto
    height 40px
    border-bottom 1px solid #eee
    margin-top 20px
    span {
        width 22px
        height 22px
        color red
        font-size 22px
        display inline-block
        line-height 52px
        float left
        text-align center}
        img {
            width 100%
            height 100%}
    input {
        display block
        border none
        height 100%
        font-size 14px
        width 90%
        padding 0px 10px
        margin-bottom 15px
        line-height 21px
        float right
    }

    button {
        width: 100%;
        height: 100%;
        background: #aad114;
        border: none;
        color: #fff;
        font-size: 16px;
    }
}

.top {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    display: flex;
    flex-direction: row;

    button {
        flex: 1;
        border: none;
        outline: none;
        font-size: 13px;
        color: #999;
        font-family: 'PingFangSC-Regular';
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }

    .te {
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
    }

    .active {
        color: #8FC31F;
        border-bottom: 2px solid #8FC31F;
    }
}

.top {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    display: flex;
    flex-direction: row;

    button {
        flex: 1;
        border: none;
        outline: none;
        font-size: 13px;
        color: #999;
        font-family: 'PingFangSC-Regular';
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }

    .te {
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
    }

    .active {
        color: #8FC31F;
        border-bottom: 2px solid #8FC31F;
    }
}

/* 地址 */
.box {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    position: relative;
    font-family: 'PingFang-SC-Medium';
    // margin-top: 0.92rem;
}

.box ul {
    width: 100%;
    height: auto;
}

.box ul li {
    width: 100%;
    background: #fff;
    margin-bottom: 0.2rem;
}

.box ul li .boom {
    width: 100%;
}

.box ul li .boom .boom_t {
    height: auto;
    border-bottom: 1px solid #f2f2f2;
    padding: 0.26rem 0.4rem;
    box-sizing: border-box;
}

.box ul li .boom .boom_b {
    height: 0.79rem;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.box ul li .boom .boom_t p {
    font-size: 14px;
    line-height: 0.56rem;
    color: #999;
    font-family: 'PingFang-SC-Regular';
}

.box ul li .boom .boom_t p span {
    color: #666;
    font-size: 14px;
    line-height: 0.56rem;
    margin-right: 0.1rem;
}

.box ul li .boom .boom_t p .te {
    display: inline-block;
    width: 0.8rem;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #f19736;
    border: 1px solid #f19736;
    border-radius: 5px;
    text-align: center;
    display: none;
}

.box ul li .boom .boom_t p .active {
    display: inline-block;
}

.set {
    float: left;
    width: 65%;
    height: 100%;
}

input {
    display: none;
    width: 0.36rem;
    height: 0.36rem;
    float: left;
}

label {
    width: 10%;
    height: 100%;
    display: inline-block;
    position: relative;
    line-height: 50px;
    color: #999;
    float: left;
}

label:active {
    background: #EEEEEE;
}

label:after {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid #F8A120;
    position: absolute;
    top: 0.22rem;
    margin-right: 10px;
    border-radius: 20px;
}

input:checked+label:after {
    background-color: #F8A120;
}

.line {
    width: 100%;
    height: 1px;
    background: #ccc;
    opacity: 0.2;
}

.box ul li .boom .boom_b span {
    color: #999;
    font-size: 14px;
    line-height: 0.79rem;
    display: inline-block;
    float: left;
}

.box ul li .boom .boom_b .right {
    float: right;
    width: 2.24rem;
    height: 100%;
}

.box ul li .boom .boom_b .right .edit {
    float: left;
    font-family: 'PingFang-SC-Regular';
    background: url('../../assets/imgs/bianji.png') no-repeat center left;
}

.box ul li .boom .boom_b .right .del {
    float: right;
    font-family: 'PingFang-SC-Regular';
    background: url('../../assets/imgs/shanchu.png') no-repeat center left;
}

.box ul li .boom .boom_b .right .corn {
    margin-left: 0.5rem;
}
</style>